<template>
  <div class="dashboard-page">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>面经后台</el-breadcrumb-item>
      <el-breadcrumb-item>数据看板</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card" shadow="never">
          <i class="el-icon-user"></i>
          <h5 class="tit">活跃用户</h5>
          <h2 class="num">802</h2>
          <p class="tag">
            <i>↑ 5.23%</i>
            最近一个月
          </p>
        </el-card>
        <el-card class="box-card" shadow="never">
          <i class="el-icon-tickets"></i>
          <h5 class="tit">平均访问量</h5>
          <h2 class="num">1298</h2>
          <p class="tag">
            <i class="red">↓ 8.56%</i>
            截止最近一周
          </p>
        </el-card>
        <el-card class="box-card" style="height: 180px" shadow="never">
          <h4>Enhance your Campaign for better outreach →</h4>
          <img src="@/assets/imgsvg.svg" alt="" /> </el-card
      ></el-col>
      <el-col :span="18">
        <BarView :data="barData"></BarView>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <PieView :data="pieData"></PieView></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <RadarView :data="radarData"></RadarView></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <MorepieView></MorepieView></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import PieView from '@/components/PieView.vue'
import BarView from '@/components/BarView.vue'
import RadarView from '@/components/RadarView.vue'
import MorepieView from '@/components/MorepieView.vue'
export default {
  name: 'DashboardView',
  components: {
    PieView,
    BarView,
    RadarView,
    MorepieView
  },
  data () {
    return {
      pieData: [],
      barData: [],
      radarData: []
    }
  },
  methods: {},
  created () {
    // 柱状图
    const data1 = [
      {
        name: '衬衫',
        value: 5
      },
      {
        name: '羊毛衫',
        value: 20
      },
      {
        name: '雪纺衫',
        value: 36
      },
      {
        name: '裤子',
        value: 10
      },
      {
        name: '高跟鞋',
        value: 10
      },
      {
        name: '袜子',
        value: 20
      }
    ]
    this.barData = data1
    // 饼图
    const data2 = [
      { value: 1048 },
      { value: 735 },
      { value: 580 },
      { value: 484 },
      { value: 300 }
    ]
    this.pieData = data2
    // 雷达图
    const data3 = [
      {
        name: 'Chrome',
        value: 80
      },
      {
        name: 'Blorer',
        value: 20
      },
      {
        name: 'Edge',
        value: 60
      },
      {
        name: 'Opera',
        value: 40
      },
      {
        name: 'Safari',
        value: 30
      },
      {
        name: 'Firefox',
        value: 50
      }
    ]
    this.radarData = data3
  }
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin: 10px 0 25px;
}
.el-card {
  width: 400px;
  height: 140px;
  position: relative;
  color: #6c757d;
  border: 1px solid #ebeef5;
  margin-bottom: 20px;
  [class^='el-icon'] {
    position: absolute;
    top: 30px;
    right: 25px;
    color: #ccc;
    font-size: 30px;
    font-weight: 700;
  }
  .tit {
    font-size: 14px;
    margin: 6px 0;
  }
  .num {
    font-size: 30px;
    margin: 6px 0;
  }
  .tag {
    margin: 0px;
    font-size: 14px;
    color: #999;
    i {
      font-style: normal;
      color: #0acf97;
      margin-right: 10px;
    }
    .red {
      color: #fa5c7c;
    }
  }
  h4 {
    width: 40%;
    float: left;
    font-size: 18px;
    margin-left: 5%;
  }
  img {
    width: 40%;
    float: left;
    margin-left: 10%;
    margin-top: 30px;
  }
}
</style>
